<script setup lang="ts">
import { useIntervalFn } from '@vueuse/core'
import { ref } from 'vue'
// pause 是暂停的方法
// resume 是开启的方法
// isActive 是检测定时器是否在运行 是一个布尔值
const time = ref(0)
const { pause, resume, isActive } = useIntervalFn(
  () => {
    // 倒计时结束暂停
    if (time.value <= 0) return pause()
    time.value--
  },
  1000,
  { immediate: false } // 禁止定时器立即执行
)
const start = () => {
  time.value = 5
  resume()
}
</script>
<template>
  {{ isActive }}
  <!-- <button @click="resume">开始</button>
  <button @click="pause">暂停</button> -->
  <hr />
  <button @click="start">
    {{ time > 0 ? `${time}s后发送` : '发送验证码' }}
  </button>
</template>

<style scoped></style>
